<template>
	<view class="config">
		<nav-bars title="客服账号"></nav-bars>
		<view class="content">
			<view class="tit">设置店铺客服对外展示的头像和名称</view>
			<view class="avatar">
				<view class="imgBox" @click="uploadFN">
					<image :src="avatar.path" mode=""></image>
				</view>
				<text v-if="!open_kfid">上传头像</text>
			</view>
			<view class="name">
				<input type="text" value="" v-model="name" placeholder="请输入客服名称" />
			</view>
		</view>
		<view class="btnBox">
			<view class="btn" @click="addSubmit">下一步</view>
		</view>
	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	import URL from '@/config/url'
	export default{
		data(){
			return{
				name:'',
				avatar:{ //头像
					path:'',
					media_id:''
				},
				open_kfid:''
			}
		},
		onLoad() {
			this.getCustomeInfo()
		},
		onShow() {
			// this.getCustomeInfo()
		},
		methods:{
			// 获取 客服详情
			getCustomeInfo(){
				customeApi.customInfo().then(res=>{
					console.log(res,'0000')
					if(res.code==1){
						this.avatar.path = res.data.image_url?res.data.image_url:'';
						this.name = res.data.name?res.data.name:'';
						this.open_kfid = res.data.open_kfid?res.data.open_kfid:''
					}
				})
			},
			
			// 下一步按钮
			addSubmit(){
				let that = this
				if(this.open_kfid){
					uni.navigateTo({
						url:`/pages_customer/pages/customSet/addRecep?open_kfid=${this.open_kfid}&name=${this.name}&path=${this.avatar.path}`
					})
				}else{
					if(this.avatar.media_id==''){
						uni.showToast({
							title:'请上传客服头像',
							icon:'none'
						})
						return
					}
					if(this.name==''){
						uni.showToast({
							title:'请输入客服名称',
							icon:'none'
						})
						return
					}
					// 当没有配置客服时
					let params = {
						name:this.name,
						media_id:this.avatar.media_id
					}
					customeApi.addCustom(params).then(res=>{
						console.log(res,'添加客服结果')
						if(res.code==1){
							uni.showToast({
								title:'添加成功',
								icon:'success'
							})
							this.getCustomeInfo()
							setTimeout(function(){
								uni.navigateTo({
									url:`/pages_customer/pages/customSet/addRecep?open_kfid=${that.open_kfid}&name=${that.name}&path=${that.avatar.path}`
								})
							},300)
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}
			},
			
			// 上传图片（临时素材接口）
			uploadFN(){
				let that = this
				uni.chooseImage({
					count:1,
				    success: (res) => {
				        const tempFilePaths = res.tempFilePaths;
						that.avatar.path = tempFilePaths[0]
				        uni.uploadFile({
				            url: URL.ENTER_UPLOAD_TEMPORARY,
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
								uni.showLoading({
									title:'上传中'
								})
				                console.log(uploadFileRes.data);
								let data = JSON.parse(uploadFileRes.data)
								if(data.code==1){
									this.avatar.media_id = data.data.media_id
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
								}else{
									uni.showToast({
										title:data.msg,
										icon:'none'
									})
								}
								setTimeout(function(){
									uni.hideLoading()
								},500)
				            }
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.config{
		height: 100%;
		background-color: #fff;
		position: relative;
		.content{
			.tit{
				font: 500 28rpx/80rpx PingFang SC;
				color: #fff;
				text-align: center;
				background-color: #C3AB7C;
			}
			.avatar{
				text-align: center;
				margin: 150rpx 0;
				.imgBox{
					width: 260rpx;
					height: 260rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					margin: 0 auto 20rpx;
					image{
						width: 260rpx;
						height: 260rpx;
						border-radius: 50%;
					}
				}
			}
			.name{
				width: 50%;
				border: 2rpx solid #ccc;
				padding: 20rpx;
				margin: 0 auto;
				input{
					text-align: center;
				}
			}
		}
		.btnBox{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			.btn{
				width: 500rpx;
				background-color: #C3AB7C;
				padding: 20rpx;
				text-align: center;
				border-radius: 20rpx;
				margin: 20rpx auto;
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
</style>
